<template>
	<div id="mt-40">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-media" v-for="items in list">
				<router-link v-bind="{to:'/news/newsDetail/'+items.id}">
					<img class="mui-media-object mui-pull-left" :src="items.imgSrc">
					<div class="mui-media-body">
						{{items.titile}}
						<p class='mui-ellipsis'>{{items.title}}</p>
					</div>
					<div class="pub-module">
						<span>发布于：{{items.pubTime|dateFmt('YYYY-MM-DD HH:mm:ss')}}</span>
						<span class="clicks">点击数量：<span class="clickHits">{{items.hits}}</span></span>
					</div>
				</router-link>
			</li>

		</ul>
	</div>
</template>

<script>
	import common from '../../ajaxReqKits/common.js';

	import { Toast } from 'mint-ui';
	import { Indicator } from 'mint-ui';
	export default {
		data() {
			return {
				list: []
			}
		},
		created() {
			this.getNewsList();
		},
		methods: {
			getNewsList() {
				/*	Toast({
					message: '提示...',
					position: 'bottom',
					duration: 1000
				});*/

				var tempList = [];

				var url = common.apiReqPath + "/newsList.jsp";

				//方式1
				/*this.$ajax.get(url).then(response => {
						this.list = response.data;
					})
					.catch(function(error) {
						console.log(error);
					});*/

				//方式2
				var self = this; //一定不能少，否则then里面使用不了data里面返回的数据
				this.$ajax.get(url).then(function(response) {
					self.list = response.data;
				}).catch(function(error) {
					console.log(error);
				});
			}
		}
	}
</script>
<style scoped>
	.mui-table-view img {
		width: 80px;
		height: 80px;
		max-width: 80px;
	}
	
	.pub-module {
		margin-top: 2rem;
		color: #4A82D1;
	}
	
	.clicks {
		margin-left: 2rem;
	}
	
	.clickHits{
		margin-left: .2rem;
	}
</style>